<template>
  <div class="app-container">
    <div class="search">
      <el-input placeholder="输入对象KEY" prefix-icon="el-icon-search" v-model="searchForm.key"></el-input>
      <el-input placeholder="输入对象名称" prefix-icon="el-icon-search" v-model="searchForm.name"></el-input>
      <el-button slot="append" icon="el-icon-search" type="primary" @click="search">搜索</el-button>
      <el-button slot="append" type="success" @click="handleAdd" icon="el-icon-plus">添加</el-button>
    </div>
<div class="tableArea">
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        :default-sort="{prop: 'key', order: 'descending'}"
      >
        <el-table-column prop="key" label="对象KEY" sortable width="180"></el-table-column>
        <el-table-column prop="name" label="对象名称" width="180"></el-table-column>
        <el-table-column prop="type" label="对象类型" width="180"></el-table-column>
        <el-table-column prop="size" label="对象大小" width="180"></el-table-column>
        <!-- <el-table-column prop="phone" label="图片" width="180"></el-table-column> -->
        <el-table-column prop="url" label="图片链接" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationArea">
      <el-pagination
        :current-page="this.searchForm.pagenum"
        :page-sizes="[5,10,15,20]"
        :page-size="this.searchForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
     <!--新增对象存储-->
    <el-dialog
      title="新增对象存储"
      :visible.sync="adduserDig"
      width="35%"
      :before-close="cancelAdduserDig"
    >
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form
            ref="adduserDate"
            :model="adduserDate"
            label-width="80px"
            :inline="true"
            :label-position="'right'"
            status-icon
            :rules="rules"
          >
            <el-form-item prop="key" label="对象KEY">
              <el-input v-model="adduserDate.dorm" />
            </el-form-item>
            <el-form-item prop="name" label="对象名称">
              <el-input v-model="adduserDate.name" />
            </el-form-item>
            <el-form-item prop="type" label="对象类型">
              <el-input v-model="adduserDate.age" />
            </el-form-item>
            <el-form-item prop="size" label="对象大小">
              <el-input v-model="adduserDate.age" />
            </el-form-item>
            <el-form-item prop="url" label="图片链接">
              <el-input v-model="adduserDate.phone" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAdduserDig">取消</el-button>
        <el-button type="primary" @click="addSubmitBtn('adduserDate')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listUser,addUser,delUser } from '@/api/system/storage'
export default {
 
  data() {
    return {
      searchForm: {
        pagenum: 1,
        pagesize: 20,
        key: "",
        name: "",
        id: sessionStorage.getItem("id")
      },
      dataSize: 0,
      tableData: [],
      deluser: {
        key: "",
        name: "",
        type:"",
        size: "",
        url:"",
        id: sessionStorage.getItem("id")
      },
      adduserDig: false, //新增学制模态框状态
      adduserDate: {
         key: "",
        name: "",
        type:"",
        size: "",
        url:"",
        id: sessionStorage.getItem("id")
      },
      //新增学制数据
      rules: {
        key: [{ required: true, message: "请输入对象KEY", trigger: "blur" }],
        name: [{ required: true, message: "请输入对象名称", trigger: "blur" }],
        type: [{ required: true, message: "请输入对象类型", trigger: "blur" }],
        size: [{ required: true, message: "请输入对象大小", trigger: "blur" }],
        url: [{ required: true, message: "请输入图片链接", trigger: "blur" }],
      },
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
     getData() {
      this.$axios.post(this.listUser, this.searchForm).then(res => {
        if (0 == res.data.code) {
          this.tableData = res.data.data.list;
          this.dataSize = res.data.data.total;
          //查询成功
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error"
          });
        }
        this.getData();
      });
    },
    search() {
      this.getData();
    },
    //每页条数
    handleSizeChange(val) {
      this.searchForm.pagesize = val;
      this.getData();
    },
    //第几页
    handleCurrentChange(val) {
      this.searchForm.pagenum = val;
      this.getData();
    },
    //打开新增对象存储模态框
    handleAdd() {
      this.adduserDig = true;
    },
    //设置新增对象存储模态框关闭钩子
    cancelAdduserDig() {
      this.adduserDig = false;
      this.adduserDate = {
        key: "",
        name: "",
        type:"",
        size: "",
        url:"",
        id: sessionStorage.getItem("id")
      };
    },
    addSubmitBtn() {
      this.$axios.post(this.addUser, this.adduserDate).then(res => {
        this.cancelAdduserDig();
        if (0 == res.data.code) {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error"
          });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error"
          });
        }
      });
      this.getData();
    },
    handleDelete(row) {
      this.deluser.id=row.id
      this.deluser.key=row.key
      this.deluser.name=row.name
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.post(this.delUser, this.deluser).then(res => {
            if (res.data.code == 0) {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "success"
              });
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "error"
              });
            }
            this.getData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
}
</script>

<style scoped>
.search {
  float: right;
  margin-top: 20px;
  margin-right: 50px;
  padding-bottom: 20px;
}
.search .el-input {
  width: 200px;
}
.searchArea {
  height: 50px;
  padding: 20px;
}
.tableArea {
  padding: 20px;
}
</style>
